<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/component.css">
    <title>可编辑表格</title>
    <style>
        #navigate {
            border: 1px solid #ccc;
            margin: 2px 2px;
            padding: 10px 0px;
        }
        
        #navSearch {
            text-align: center;
            border: 1px solid #ccc;
            margin: 2px;
            padding: 10px 0px;
        }
        
        #main {
            margin: 0px 2px;
            text-align: center;
        }
        
        .norTable,
        .norTable td,
        .norTable th {
            border: 1px solid #c6c6c6;
        }
        
        .norTable {
            margin: 0px;
            width: 100%;
            border-collapse: collapse;
        }
        
        .norTable thead {
            background-color: #ddeeff;
            font-size: 15px;
        }
        
        .norTable tr {
            height: 45px;
        }
        
        #norTableTbody tr:nth-of-type(even) {
            background-color: #f8f8f8;
        }
        
        #norTableTbody tr:hover {
            background-color: #ffe9df!important;
            cursor: pointer;
        }
        
        .norTableCheckedRow {
            background-color: lightcyan;
        }
    </style>
</head>

<body>
    <nav id="navigate">
        权限管理模块&nbsp;->&nbsp;用户信息管理页面&nbsp;<span id="operationMsg"></span>
    </nav>
    <section id="userTable">
        <nav id="navSearch">
            <input type="search" id="keyword" name="keyword" class="normal-input" style="height: 35px;">
            <button type="button" class="login-button">查询</button>
        </nav>
        <article id="main">
            <table class="norTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="all"></th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>密码</th>
                        <th>性别</th>
                        <th>email</th>
                    </tr>
                </thead>
                <tbody id="norTableTbody">
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="1" class="cbxSelect"></td>
                        <td>admin</td>
                        <td>悔创阿里jack马</td>
                        <td>123456</td>
                        <td>男</td>
                        <td>admin@qq.com</td>
                    </tr>
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="2" class="cbxSelect"></td>
                        <td>test</td>
                        <td>一般家庭马化腾</td>
                        <td>666</td>
                        <td>男</td>
                        <td>test@qq.com</td>
                    </tr>
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="3" class="cbxSelect"></td>
                        <td>manager</td>
                        <td>北大还行萨贝宁</td>
                        <td>123</td>
                        <td>男</td>
                        <td>manager@qq.com</td>
                    </tr>
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="4" class="cbxSelect"></td>
                        <td>abc</td>
                        <td>不知妻美刘强东</td>
                        <td>666</td>
                        <td>男</td>
                        <td>manager@qq.com</td>
                    </tr>
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="5" class="cbxSelect"></td>
                        <td>wang</td>
                        <td>一无所有王健林</td>
                        <td>123</td>
                        <td>男</td>
                        <td>manager@qq.com</td>
                    </tr>
                    <tr>
                        <td style="text-align: center"><input type="checkbox" data-oid="6" class="cbxSelect"></td>
                        <td>cba</td>
                        <td>家里最丑刘亦菲</td>
                        <td>123</td>
                        <td>女</td>
                        <td>manager@qq.com</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6">
                            <nav style="float: left;">
                                <button id="btnAdd" class="login-button">新增</button>
                                <button id="btnDelete" class="login-button">删除</button>
                                <button id="btnUpdate" class="login-button">修改</button>
                            </nav>
                            <nav style="float:right">
                                首页&nbsp;上一页&nbsp;
                                <select class="normal-input" style="width:30px;"></select> &nbsp;下一页&nbsp;尾页
                            </nav>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </article>
    </section>
    <section id="userOperation" hidden>
        <fieldset style="border:0px;">
            <legend hidden>用户操作</legend>
            用户名：<input type="text" name="userName"><br> 昵称：
            <input type="text" name="nickName"><br> 密码：
            <input type="password" name="password"><br> 性别：
            <input type="radio" name="sex" value="1">男&nbsp;&nbsp;<input type="radio" name="sex" value="2">女<br> email：
            <input type="text" name="email"><br>
            <button type="button" id="return">返回</button>
            <button type="button" id="userOperationAdd">提交</button>
        </fieldset>
    </section>
    <script defer>
        function selectRow(event) {
            if (event.target.tagName.toLowerCase() == 'td') {
                let input = event.target.parentNode.firstElementChild.firstElementChild;
                input.toggleAttribute("checked");
                event.target.parentNode.classList.toggle("norTableCheckedRow");
            }
        }

        function allSelect() {
            let all = document.getElementById("all");
            document.querySelectorAll(".cbxSelect").forEach(element => {
                element.checked = all.checked;
                if (all.checked) {
                    element.parentNode.parentNode.classList.add("norTableCheckedRow");
                } else {
                    element.parentNode.parentNode.classList.remove("norTableCheckedRow");
                }
            });
        }

        function doDelete(event) {
            let list = document.querySelectorAll(".cbxSelect");
            let parameter = "";
            if (window.confirm("你确定要进行删除操作吗？")) {
                [...list].filter(element => element.checked).forEach((element) => {
                    if (parameter == '') {
                        parameter += element.dataset.oid;
                    } else {
                        parameter += ',';
                        parameter += element.dataset.oid;
                    }
                });
                if (parameter == '') {
                    alert("请选择要删除的数据行！");
                }
                console.log(parameter);
            }
        }

        function doAdd() {
            document.getElementById("userTable").hidden = true;
            document.getElementById("userOperation").hidden = false;
            document.getElementById("operationMsg").innerHTML = "->&nbsp;新增用户";
        }

        function doUpdate() {}

        function updateSearch() {
            let list = document.querySelectorAll(".cbxSelect");
            let parameter = "";
            let count = 0;
            let fList = [...list].filter(element => element.checked);
            if (fList.length > 1) {
                alert("一只能修改一行数据！");
            } else if (fList.length == 0) {
                alert("请选择要修改的数据行！");
            } else {
                parameter = fList[0].dataset.oid;
            }
            console.log(parameter);
            document.getElementById("userTable").hidden = true;
            document.getElementById("userOperation").hidden = false;
            document.getElementById("operationMsg").innerHTML = "->&nbsp;修改用户";
        }

        document.getElementById("norTableTbody").addEventListener("click", selectRow, false); //选择行操作
        document.querySelectorAll(".cbxSelect").forEach((element) => {
            element.addEventListener("change", () => {
                element.toggleAttribute("checked");
                element.parentNode.parentNode.classList.toggle("norTableCheckedRow");
            });
        });
        document.getElementById("all").addEventListener("change", allSelect, false);
        //CRUD delete
        document.getElementById("btnDelete").addEventListener("click", doDelete, false);
        //CRUD add
        document.getElementById("btnAdd").addEventListener("click", doAdd, false);
        //CRUD add return
        document.getElementById("return").addEventListener("click", () => {
            document.getElementById("userTable").hidden = false;
            document.getElementById("userOperation").hidden = true;
            document.getElementById("operationMsg").innerHTML = "";
        }, false);
        //CRUD update
        document.getElementById("btnUpdate").addEventListener("click", updateSearch, false);
    </script>
</body>

</html>